import dayjs from 'dayjs'

import { html } from './index'
import { ShCalendar } from './ShCalendar'
import { ShPicker } from './ShPicker'


export class ShDatePicker extends ShPicker { 

    private $calendar: ShCalendar

    constructor() {
        super()

        this.$dropdown.append(...html`
            <sh-calendar style="width:21em" @shev-select=${this.calendarSelect}></sh-calendar>
        `)

        this.$calendar = this.$dropdown.querySelector('sh-calendar')!

        const today = dayjs().format('YYYY-MM-DD')
        this.setTextValue(today, today)
    }

    public get value(): string {
        return this.$calendar.value
    }

    public setTextValue(text: string, value: string) {
        this.$shadow.getElementById('text')!.textContent = text
        this.$calendar.value = value
    }

    private calendarSelect = () => {
        this.$shadow.getElementById('text')!.textContent = this.$calendar.value
        this.dispatchEvent(new CustomEvent('shev-select', { detail: this.$calendar.value }))
        this.$dropdown.hide()
    }
}
customElements.define('sh-date-picker', ShDatePicker)